<template>
  <div class="form-demo">
    <schema-form
      v-model="formData"
      :schema="formSchema"
      @submit="handleSubmit"
      @reset="handleReset"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormSchema } from '@/types/form'
import SchemaForm from '@/components/SchemaForm/index.vue'

const formData = ref({
  name: '',
  age: '',
  gender: '',
  hobbies: []
})

const formSchema: FormSchema = {
  fields: [
    {
      field: 'userType',
      label: '用户类型',
      type: 'radio',
      options: [
        { label: '个人用户', value: 'personal' },
        { label: '企业用户', value: 'company' }
      ]
    },
    {
      field: 'companyName',
      label: '企业名称',
      type: 'input',
      rules: {
        required: true,
        message: '请输入企业名称'
      },
      show: {
        field: 'userType',
        operator: '=',
        value: 'company'
      }
    },
    {
      field: 'businessScale',
      label: '企业规模',
      type: 'select',
      show: {
        and: [
          {
            field: 'userType',
            operator: '=',
            value: 'company'
          },
          {
            field: 'companyName',
            operator: 'notEmpty'
          }
        ]
      },
      options: [
        { label: '小型', value: 'small' },
        { label: '中型', value: 'medium' },
        { label: '大型', value: 'large' }
      ]
    }
  ],
  layout: {
    labelWidth: '100px',
    labelPosition: 'left'
  }
}

const handleSubmit = (data: any) => {
  console.log('表单提交:', data)
}

const handleReset = () => {
  console.log('表单重置')
}
</script>
